<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp"%>
<style>
#single table th {
	vertical-align: top;
}
</style>
<ul class="nav nav-tabs tab tBlock">
	<li class="active">
		<a deny="not" class="nFocus" href="#single" data-toggle="tab">
			<i class="icon-envelope"></i>
			发送短信
		</a>
	</li>
</ul>

<div class="tab-content" style="margin-top: -20px; padding: 10px;">
	<div class="tab-pane active" id="single">
		<form id="smsForm" class="well form-inline" action="${ctx }/sms/send" method="post">
			<table class="table table-striped table-bordered table-condensed">
				<tr>
					<th>手机号：</th>
					<td>
						<input name="mobile" type="text" value="${sendVO.mobile }" class="span6" maxlength="239" title="最多20个号码">
						<br/>
						<span id="phoneNumber"></span>
						<span>多个号码以“,”间隔，末尾不留“,”</span>
					</td>
				</tr>
				<tr>
					<th>内容：</th>
					<td>
						<textarea rows="5" name="content" class="span8">${sendVO.content }</textarea>
						<br/>
						<span class="tBlue" id="notice"></span>
						70字/条短信
					</td>
				</tr>
				<tr>
					<th></th>
					<td>
						<input type="submit" class="btn btn-primary" value="发 送">
						<input type="reset" class="btn" value="清 空">
					</td>
				</tr>

			</table>
		</form>
	</div>
</div>
<script>
	jQuery.validator.addMethod("phoneNumber", function(value, element) {
		var tel = /^([0-9]{11},)*([0-9]{11})$/;
		return this.optional(element) || tel.test($("[name=mobile]").val());
	}, "号码格式不正确");

	$(function() {
		$("#smsForm").validate({
			rules : {
				content : "required",
				mobile : {
					phoneNumber : true
				}
			}
		});

		$("[name=mobile]").keyup(function() {
			var phoneNumber = Math.ceil($("[name=mobile]").val().length / 12);
			var html = "已输入" + phoneNumber + "个号码，";
			$("#phoneNumber").html(html);
			$("[name=content]").keyup();
		});

		$("[name=content]").keyup(function() {
			var length = $(this).val().length;
			var phoneNumber = Math.ceil($("[name=mobile]").val().length / 12);
			var html = "已输入" + length + "字,共" + (Math.ceil(length / 70) * phoneNumber) + "条短信,";
			$("#notice").html(html);
		});
		sort('stime');
	});
</script>
<c:if test="${msg != null}">
	<script>
		msgAlert.show("${msg}");
	</script>
</c:if>